<template>
	<div class="new-widgets-top">


		<el-main style="padding-bottom: 0px !important;height: 100%;padding-top: 0px;padding-left: 0px;
		padding-right: 0px;overflow: hidden;">
		<el-row :gutter="15" style="height: 100%;">
			<el-col :lg="4">
				<AssetStatisticdrk></AssetStatisticdrk>
			</el-col>
			<el-col :lg="4">
				<AssetStatisticzy></AssetStatisticzy>
			</el-col>
			<el-col :lg="4">
				<AssetStatisticdb></AssetStatisticdb>
			</el-col>
			<el-col :lg="4">
				<AssetStatisticbf></AssetStatisticbf>
			</el-col>
			<el-col :lg="4">
				<AssetStatisticcs></AssetStatisticcs>
			</el-col>
			<el-col :lg="4">
				<AssetStatisticCheck></AssetStatisticCheck>
			</el-col>
		</el-row>
	</el-main>
	</div>
	<div class="divtop"   ref="divtop">
		<el-row>
			<el-col :md="24" style="display: block; max-width:30%;flex: 0 0 30%;">
				<div style="height: 100%;">
				<my-warning :height="topcontentheight"></my-warning>
				</div>
			</el-col>
			<el-col :md="24" style="display: block; max-width:40%;flex: 0 0 40%;">
				<div class="todo-list" :style="getleftidth()">
					<div class="worktable-shadow">
						<div class="todo-main-container">
							<div class="layout-vertical">
								<div class="todo-box">
									<my-pending :is-index-widgets="true"></my-pending>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :md="24" style="display: block; max-width:30%;flex: 0 0 40%;" >
				<div class="Quick-Center"  :style="'height:'+topcontentheight+'px;padding-top: 0px !important;'">

					<el-header class="Quick-noticeHead" style="padding-left: 10px;">
						<div class="Quick-Center-Top">
							<div class="Quick-Center-Topimg"></div>
							<span class="Quick-Center-TopTitle">快捷中心</span>
						</div>
					</el-header>
					<div style="width: 12%;">
						<div class="leftquickCenter" @click="leftquickCenter">
						<el-icon>
							<component :is="'el-icon-arrow-left'"></component>
						</el-icon>
						</div>
					</div>
					<el-main style="padding-bottom: 0px;padding-left: 0px;padding-right: 0px;width: 76%;margin-top: 40px;">

						<!--el-row :md="24" :lg="24" class="Quick-CenterRow" style="height: 40px;">
							<el-col :lg="24">
								<div class="Quick-Center-Top mb20">
									<div class="Quick-Center-Topimg"></div>
									<span class="Quick-Center-TopTitle">快捷中心</span>
								</div>
							</el-col>
						</el-row-->
						<el-row v-for="(quickCenterMenu, num) in currquickCenterMenu" :md="24" :lg="24" class="Quick-CenterRow" :style="'height:'+topcontentrowheight+'px;'">

							<el-col :lg="8" v-for="(item, index) in quickCenterMenu">
								<div class="Quick-itmeRow" :style="'margin-top:'+topcontentrowtop+'px'">
									<div v-bind:key="index" class="Quick-itme" :class="getquickCenterColClass(index)" @click="quickCenterHandler(item)">
										<el-icon size="30" class="quickCenterIcon" ><component :is="geticon(item)"></component></el-icon>
									</div>
									<div class="colimglable">{{ item.name }}</div>
								</div>
							</el-col>

						</el-row>
						<div class="quickCenter-pageContenBox">
								<div v-if="quickCenterPages>1" class="quickCenter-pageBox" >

									<div v-for="index of quickCenterPages" :key="index" :Value="index" style="float: left;margin-right: 15px;cursor:pointer">
										<!-- 实心圆 -->
										<span v-if="(index-1)==quickCenterindex" :style="{ display: 'inline-block', width: '8px', height: '8px', backgroundColor: '#93A0FF', borderRadius: '50%', }"></span>
										<!-- 空心圆 -->
										<span v-if="(index-1)!=quickCenterindex" @click="updatequickCenterindex(index)" :style="{ display: 'inline-block', width: '8px', height: '8px', border: '1px solid #93A0FF', borderRadius: '50%' }"></span>

									</div>

								</div>
							</div>

					</el-main>
					<div style="width: 12%;"><div class="rightquickCenter" @click="rightquickCenter">
						<el-icon>
							<component :is="'el-icon-arrow-right'"></component>
						</el-icon>
					</div></div>

				</div>
			</el-col>


		</el-row>





	</div>
	<div class="divbottom" :style="getbottomstyle()">
		<el-main style="padding-bottom: 0px !important;height: 100%;padding-top: 0px;padding-left: 0px;
		padding-right: 0px;overflow: hidden;" class="symain">

		<el-row style="height: 100%;" >
			<el-col :md="24" style="display: block; max-width:30%;flex: 0 0 30%;" :style="getbottomstyle()">


				<div class="Notilist" style="height:100%">
					<el-header class="notice-noticeHead" style="padding-top: 0px;padding-bottom: 0px;">
						<div class="Quick-Center-Top" style="margin-left: 8px;">
							<div class="Notice-Topimg"></div>
							<span class="Quick-Center-TopTitle">通知公告</span>
							<span class="Quick-Center-TopMore">({{noticecount}})</span>
						</div>

					</el-header>
					<el-main class="nopadding drawer-content" style="border: none;overflow: hidden;">
						<ul class="noticenav" :style="'height:'+noticeHeight+'px'">
							<li  v-for="item in NoticeList" v-bind:key="item.code" class="noticeitem" @click="opennotice(item)">
								<!--div class="imgleftli"></div-->
								<div style="float:left;width:100%">

								<div class="noticetitle" v-if="item.title.length>12">
									<el-tooltip effect="dark" :content="item.title" placement="top-start"
										:show-after="500"
										style="font-size:14px;">
										<div style="white-space: nowrap;overflow: clip; text-overflow: ellipsis;">{{item.title  }}</div>
								</el-tooltip>

								</div>
								<div class="noticetitle" v-else>
									<div style="white-space: nowrap;overflow: clip;text-overflow: ellipsis;">{{item.title  }}</div>
								</div>
									<div class="noticedate">
							{{item.date  }}
						</div>
								</div>
							</li>
						</ul>
						<div  class="Quick-noticeBox" @click="toMore">
							<span class="noticetitleTopMoretitle">查看更多></span>
						</div>
					</el-main>



				</div>
			</el-col>
			<el-col :md="24" style="display: block; max-width:35%;flex: 0 0 35%;">
				<assetGrowthStatistics :height="assetGrowthHeight"></assetGrowthStatistics>

			</el-col>
			<el-col :md="24" style="display: block; max-width:35%;flex: 0 0 35%;">
				<assetScrapStatistics :height="assetGrowthHeight"></assetScrapStatistics>
			</el-col>

		</el-row>
</el-main>
	</div>

	<dialog1 v-if="asynDialog1" draggable @closed="asynDialog1 = false"></dialog1>
</template>

<script>
import {defineAsyncComponent} from 'vue'
import useTabs from '@/utils/useTabs'
import MyPending from "@/views/home/widgets/components/my-pending.vue";
import MyWarning from "@/views/home/widgets/components/my-warning.vue";
import scStatistic from '@/components/scStatistic';
import AssetStatisticdrk from "@/views/home/widgets/components/asset-statistics-drk.vue";
import AssetStatisticzy from "@/views/home/widgets/components/asset-statistics-zy.vue";
import AssetStatisticdb from "@/views/home/widgets/components/asset-statistics-db.vue";
import AssetStatisticbf from "@/views/home/widgets/components/asset-statistics-bf.vue";
import AssetStatisticcs from "@/views/home/widgets/components/asset-statistics-cs.vue";
import AssetStatisticyc from "@/views/home/widgets/components/asset-statistics-yc.vue";
import ExSelect from "@/components/exSelect/index.vue";
import assetGrowthStatistics from "@/views/home/widgets/components/assetGrowthStatistics.vue";
import assetScrapStatistics from "@/views/home/widgets/components/assetScrapStatistics.vue";
import assetStateStatistics from "@/views/home/widgets/components/assetStateStatistics.vue";
import assetCategoryStatistics from "@/views/home/widgets/components/assetCategoryStatistics.vue"
import assetAddStatistics from "@/views/home/widgets/components/assetAddStatistics.vue"
import assetStatusStatistics from "@/views/home/widgets/components/assetStatusStatistics.vue"
import http from "@/utils/request";
import AssetStatisticCheck from "@/views/home/widgets/components/asset-statistics-check.vue";

export default {
	title: "版本信息",
	icon: "el-icon-monitor",
	description: "当前项目版本信息",
	components: {
		AssetStatisticCheck,
		MyPending,
		dialog1: defineAsyncComponent(() => import("./dialog1")),
		AssetStatisticdrk,
		AssetStatisticzy,
		AssetStatisticdb,
		AssetStatisticbf,
		AssetStatisticcs,
		AssetStatisticyc,
		scStatistic,
		assetGrowthStatistics,
		assetCategoryStatistics,
		assetAddStatistics,
		assetStatusStatistics,
		assetScrapStatistics,
		assetStateStatistics,
		MyWarning
	},
	data() {
		return {
			dialog1: false,
			asynDialog1: false,
			ver: 'loading...',
			time: '',
			type: '',
			val: '',
			open: true,
			checked: false,
			 list: {
				apiObj: this.$API.demo.list
			},
			search: {
				keyword: ""
			},
			quickCenterMenu:[],
			quickCenterpage:0,
			quickCentersize:6,
			quickCenterrowsize:6,
			currquickCenterMenu:[],
			currquickCenterMenu2:[],
			quickCenterindex:0,//快捷下方分页坐标  默认是0
			quickCenterPages:1,//快捷分页页数  10个一页
			windowWidth:0,
			windowHeight:0,
			assetCategoryHeight:"160px",
			assetGrowthHeight:"160px",
			topcontentheight:315,
			topcontentrowheight:90,
			topcontentrowtop:5,
			topcontentrow:2,
			NoticeList:[
			],
			listHeight:100,//list高度
			noticecount:0,
			noticeHeight:100,//list高度
		}

	},
	created() {
		let quickCenter = this.$TOOL.data.get("QUICK_CENTER_MENU");
		if(quickCenter){
			this.quickCenterMenu = quickCenter;
			this.setquickCenterlist();
		}
	},
	async mounted() {
		this.getVer();
		window.addEventListener('resize', this.handleResize);
  		this.handleResize();
	  	this.getHeight()//计算图表和快捷中心2大板块区域高度
		this.refreshnotice();
	},
	onLoad() {
	},
	methods: {
		getHeight(){//计算图表和快捷中心2大板块区域高度
			var clientWidth = window.innerWidth;
			var screenHeight=window.innerHeight;
			let contH=(screenHeight-304-60)/2;
			if(clientWidth<1600){
				contH=(screenHeight-236)/2;
			}

			this.topcontentheight=contH;//板块高度
			this.listHeight=contH-10;//list高度
			this.topcontentrowheight=(this.listHeight-140)/this.topcontentrow;

			this.topcontentrowtop=(this.topcontentrowheight-56)/2;

		},
		setquickCenterlist(){
			/*
			if(document.documentElement.clientWidth<1536){
				this.quickCentersize=6;
				this.quickCenterrowsize=8;
			}*/

			this.topcontentrowtop=(this.topcontentrowheight-56)/2;
			//this.topcontentrow= Math.floor((this.topcontentheight-110) /this.topcontentrowheight);

			//this.topcontentrowheight=(this.topcontentheight-120)/this.topcontentrow;
			this.quickCentersize=3;//每行3个
			this.currquickCenterMenu=[];
			//this.currquickCenterMenu2=[];
			this.quickCenterPages= Math.ceil(this.quickCenterMenu.length /(this.quickCentersize*this.topcontentrow));
			let currquickCenterMenu2=[];
			//this.topcontentrowheight=(this.listHeight-50)/this.topcontentrow;

			//console.log(this.quickCenterMenu);

			let strrtpage=this.quickCenterindex*(this.quickCentersize*this.topcontentrow);
			let endpage=(this.quickCenterindex+1)*(this.quickCentersize*this.topcontentrow);
			for (let index = strrtpage; index < this.quickCenterMenu.length; index++) {
				if(index<endpage){
					const element = this.quickCenterMenu[index];
					if(index==(strrtpage*this.quickCentersize)){
						currquickCenterMenu2=[];
					}
					currquickCenterMenu2.push(element);
					if(currquickCenterMenu2.length==this.quickCentersize){
						this.currquickCenterMenu.push(currquickCenterMenu2);
					}
					if(index==this.quickCenterMenu.length-1 && this.currquickCenterMenu.length==0
					){

						this.currquickCenterMenu.push(currquickCenterMenu2);
					}
				}
			}

			/*
			let strindex=this.quickCenterindex*this.quickCentersize;
			let endindex=this.quickCenterindex*this.quickCentersize+this.quickCentersize;
			for (let index = strindex; index < endindex; index++) {
				if(this.quickCenterMenu.length>index){
					const element = this.quickCenterMenu[index];
					if((index-(strindex))<(this.quickCentersize/2)){
						this.currquickCenterMenu.push(element);
					}else{
						this.currquickCenterMenu2.push(element);
					}
				}
			}
			*/
		},
		updatequickCenterindex(index){
			this.quickCenterindex=index-1;
			this.setquickCenterlist();
		},
		leftquickCenter(){

			if(this.quickCenterindex>0){
				this.quickCenterindex=this.quickCenterindex-1;
				this.setquickCenterlist();
			}

		},
		rightquickCenter(){

			if((this.quickCenterindex+1)<this.quickCenterPages){
				this.quickCenterindex=this.quickCenterindex+1;
				this.setquickCenterlist();
			}
		},
		open1() {
			this.dialog1 = true
		},
		asyn1() {
			this.asynDialog1 = true
		},
		async getVer() {
			this.windowWidth = window.innerWidth;
			this.windowHeight=window.innerHeight;
			var minheight=110;
			let fyheight=(this.windowHeight-68-68-125-20-10-50)/2;
			var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
			if(isFull){

				fyheight=(this.windowHeight-125-28-20-10-50)/2;
			}

			if(fyheight>minheight){
				this.assetCategoryHeight=fyheight-25+"px"
				this.noticeHeight=fyheight;
				this.assetGrowthHeight=fyheight-25+"px"
				// this.topcontentheight=fyheight+55;
			}else{
				this.assetCategoryHeight=(minheight-68)+"px"
				this.noticeHeight=minheight-68-20;
				this.assetGrowthHeight=(minheight-68)+"px"
				// this.topcontentheight=minheight+55;
			}


		},
		handleResize() {
			this.windowWidth = window.innerWidth;
			this.windowHeight=window.innerHeight;
			var minheight=110;
			let fyheight=(this.windowHeight-68-68-125-20-10-50)/2;
			var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
			//alert(isFull);

			if(isFull){

				fyheight=(this.windowHeight-125-28-20-10-50)/2;
			}

			if(fyheight>minheight){
				this.assetCategoryHeight=fyheight-25+"px"
				this.noticeHeight=fyheight;
				this.assetGrowthHeight=fyheight-25+"px"
				// this.topcontentheight=fyheight+55;
			}else{
				this.assetCategoryHeight=(minheight-68)+"px"
				this.noticeHeight=minheight-68-20;
				this.assetGrowthHeight=(minheight-68)+"px"
				// this.topcontentheight=minheight+55;
			}

		},
		getleftidth(){
			//页面宽度-左边距离-右边距离-中间距离-右边区块
			// width:"+(this.windowWidth-208-10-388-388-22-86-10)+"px;
			return "height:"+this.topcontentheight+"px";
		},
		getbottomstyle(){
			//页面宽度-左边距离-右边距离
			//页面高度-头部-页签向上距离-页签高度-状态向上距离-状态高度-审批中心高度-图表向上距离-整体页面向下距离
			var minheight=200;
			let fyheight=(this.windowHeight-68-10-50-125)/2;

			/*
			if(fyheight>minheight){
				return "width:"+(this.windowWidth-200-5-10-74)+"px;height:"+fyheight+"px";
			}else{
				return "width:"+(this.windowWidth-200-5-10-74)+"px;height:"+(minheight)+"px";
			}
			*/
			if(fyheight>minheight){
				return "height:"+fyheight+"px";
			}else{
				return "height:"+(minheight)+"px";
			}
		},
		getnoticestyle(){
			let fyheight=(this.windowHeight-68-68-125-20-10-50)/2;

			return "height:"+(fyheight+30)+"px";
		},
		gettopstyle(){
			//页面宽度-左边距离-右边距离
			//页面高度-头部-页签向上距离-页签高度-状态向上距离-状态高度-审批中心高度-图表向上距离-整体页面向下距离
			var minheight=200;
			let fyheight=(this.windowHeight-68-10-15-68-125-15-10)/2;
			if(fyheight>minheight){
				return "width:"+(this.windowWidth-200-5-10-74)+"px;height:"+fyheight+"px";
			}else{
				return "width:"+(this.windowWidth-200-5-10-74)+"px;height:"+(minheight)+"px";
			}
		},
		async refreshnotice() {
			//请求数据加载
			let rsp = await http.post(this.$API.system.notice.list.url, {});

				if (rsp.success) {

					this.noticecount=rsp.data.total;
					//{id:1,code:"1",title:"公告内容公告内容26...",date:"2024-05-13"}
					rsp.data.records.forEach((itemI, indexI) => {
						if(indexI<6){
							this.NoticeList.push({
								id:itemI.id,
								code:itemI.id,
								//title:this.getfortitle(itemI.noticeName),
								title:(itemI.noticeName),
								alltitle:itemI.noticeName.toString(),
								noticeContent:itemI.noticeContent,
								date:this.getfortime(itemI.createTime)
							});
						}

					})

					//rsp.data.records
				} else {

				}

		},
		getfortitle(title){

		if(title.length>12){
		let str=title.toString();
		// alert(str);
		let datestr= str.substr(0,12)+"...";
		return datestr;
		}else{
		return title;
		}

		},
		getfortime(time){

          if(time.length>8){
            let str=time.toString();
           // alert(str);
            let datestr= str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2);
            return datestr;
          }else{
            return time;
          }

		},
		getIconbgcolor(i){
			if(i==0){
				return "background-color: rgb(0, 121, 222);box-shadow: 0 0 10px rgb(0, 121, 222);";
			}else if(i==1){
				return "background-color: rgb(160, 176, 186);box-shadow: 0 0 10px rgb(160, 176, 186);";
			}else if(i==2){
				return "background-color: rgb(33, 115, 70);box-shadow: 0 0 10px rgb(33, 115, 70);";
			}else if(i==3){
				return "background-color: rgb(109, 60, 247);box-shadow: 0 0 10px rgb(109, 60, 247);";
			}else if(i==4){
				return "background-color: rgb(0, 121, 222);box-shadow: 0 0 10px rgb(0, 121, 222);";
			}else if(i==5){
				return "background-color: rgb(241, 74, 45);box-shadow: 0 0 10px rgb(241, 74, 45);";
			}else if(i==6){
				return "background-color: rgb(33, 115, 70);box-shadow: 0 0 10px rgb(33, 115, 70);";
			}else if(i==7){
				return "background-color: rgb(160, 176, 186);box-shadow: 0 0 10px rgb(160, 176, 186);";
			}else{
				return "background-color: red;box-shadow: 0 0 10px rgb(0, 121, 222);";
			}
		},
		refresh1() {
			useTabs.refresh()
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
		deleteRow() {
			this.$refs.table.deleteRow(0)
		},//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			var params = {
				groupId: data.id
			}
			//console.log(params.groupId);
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		quickCenterHandler(menu){
			this.$router.replace({
				path: menu.path
			})
		},
		getquickCenterColClass(index){
			/*
			if(index>14){
				index=index-14;
			}else
			if(index>7){
				index=index-7;
			}*/
			return "quickCenterCol";
		},
		geticon:function(item){
			//onsole.log(item);
			return item.quickCenterIcon;
			/*
			if(item.icon){
				if(item.icon.toString().indexOf("Custom")>-1){
					return item.icon+"Active";
				}else{
					return item.icon;
				}
			}else{
				return 'el-icon-menu';
			}
			*/

		},
		toMore(){
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);
			this.$router.push({
				name: "nodelist",
				params: {fromRouteId: fromRouteId}
			});
		},
		opennotice(item){

			let title =item.title;
			let id = item.id;
			let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
			//noticeContent
			let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);
			let routeParams = {
						id: key,
						title: title,
						modelid:id
					};
			this.$store.dispatch("addRouteParams", routeParams);
			localStorage.setItem("noticeid", item.id);
			this.$router.push({
				name: "nodeview",
				params: {fromRouteId: fromRouteId, key: key}
			});

		}
	}
}
</script>
<style scoped lang="scss">
.mb20{
	margin-bottom: 20px;
	margin-top: 5px;
}
.new-widgets-top {
	display: flex;
	flex-direction: row;
	width: 100%;
	//float: left;
	//margin-top: 10px;
	//height: 125px;
}
.Quick-itmeBox{
	display: flex;
	flex-wrap: wrap;
}
.Quick-CenterRow{
	height: 78px;
}
.Quick-itmeRow{
	margin:0 16px;
}
.Quick-Center-leftBox{
	margin: 5px 0 10px;overflow: hidden;
	//height:46px;
}
.quickCenter-pageContenBox{
	position: absolute;
	bottom:5px;
	left:0;
	width:100%;
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px;
}
.quickCenter-pageBox{
	text-align: center;

}
.noticeitem{
	cursor: pointer;
	//width: 324px;
	height: 33px;
	display: flex;align-items: center;
	border-bottom: 1px #e9e6e6 solid;
	border-left:1px #e9e6e6 solid;
	border-right:1px #e9e6e6 solid;
}
.noticeitem:hover{
	background-color: rgb(229, 229, 229);
}
.noticenav li:first-child{
	border-top: 1px #e9e6e6 solid;
}
.Quick-noticeHead{
	position: absolute;
	width:90%;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding-bottom: 0px;
	--el-header-height: 50px;
	padding-top: 0px;

}
.notice-noticeHead{
	position: absolute;
	width:100%;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding-bottom: 0px;
	--el-header-height: 50px;
}
.Quick-noticeBox{
	right: 14px;cursor: pointer;display:flex;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	border: 1px solid #fff;
	float: right;
	margin-top: 7px;
	width: 80px;
	border-radius: 3px;
	margin-right: 12px;
}
.Quick-noticeBox:hover{
	background-image: linear-gradient(
    221deg,
    rgba(241, 246, 253, 1) 0,
    rgba(241, 246, 253, 1) 0,
    rgba(210, 227, 252, 1) 100%,
    rgba(210, 227, 252, 1) 100%
  );

	border: 1px solid rgba(105, 178, 251, 1);
}

.quickCenterCol {

border-radius: 7px;
height: 56px;
width: 56px;
//margin-left: 12px;
}
.divtop {
	padding-top:16px;
}

.todo-list{
	display: flex;
	flex-direction: row;
	height: 315px;
	margin:0 12px;
	border-radius: 7px;
	background-color: rgba(255, 255, 255, 1);

}

.Quick-Center {
	position: relative;
	display: flex;
	flex-direction: row;
	height: 315px;
	//width: 388px;
	//float: left;
	//margin-top: 0px;
	//margin-left: 0px;
	//margin-right: 0px;
	//padding-top: 0px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 7px;
	//padding-top: 30px;
	//padding-left: 10px;
	//padding-right: 10px;
	width:100%;

}
.Notilist{
	background-color: rgba(255, 255, 255, 1);
  border-radius: 7px;
  //margin-left: 11px;
  //width: 388px;
	overflow: hidden;
	position: relative;
}



.divbottom {
	margin-top: 14px;
	margin-left: 0px;
	margin-right: 0px;
	//float: left;


}




.Quick-Center .el-main{
	overflow: hidden;
}
.Quick-Center-Top{
	//width: 300px;
  //height: 24px;
  margin-left:12px;
	display: flex;
	align-items: center;
}
.Quick-Center-Topimg {
  width: 24px;
  height: 24px;
  background: url(../../../../../public/img/homeQuickCenterTop.png)
    100% no-repeat;
  background-size: 100% 100%;
	margin-right: 10px;
}

.Notice-Topimg {
  width: 20px;
  height: 20px;
  background: url(../../../../../public/img/homeNoticeTop.png)
    100% no-repeat;
  background-size: 100% 100%;
	margin-right: 10px;
}

.app-title {
	color: rgb(45, 55, 72);
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	top: 20px;

}

.group-name-out {
	margin-top: 8px;
	font-weight: 700;
	color: rgb(45, 55, 72);
	font-size: 14px;
	line-height: 22px;
}



.worktable-shadow {

	width: 100%;
	margin-top: 0px;
}

.todo-main-container {
	background: #fff;
	color: rgb(45, 55, 72);
	border-radius: 7px;
	float:left;
	height: 100%;
	width: 100%;
}

.todo-count-text, .step-text {
	padding-left: 10px;
	font-size: 16px;
}
.layout-vertical{
	height: 100%;
}
.layout-vertical .todo-box {
	height: 100%;
	padding: 20px 16px;

	background: #fff;
	border-radius: 7px;
	padding-top: 4px;
	padding-bottom: 0px !important;
	padding-left: 10px;
	padding-right: 10px;
}

.layout-vertical .my-todo, .layout-vertical .step-wrapper {
	width: 100%;
	margin-bottom: 5px;
	position: relative;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	padding: 0 12px;
	line-height: 40px;
}

.layout-vertical .todo-count, .layout-vertical .todo-wrapper {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	line-height: 40px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.layout-vertical .todo-item-icon-class {
	margin-right: 8px;
	color: rgb(45, 55, 72);
	font-size: 22px;
	line-height: 40px;
	font-weight: 500;
	vertical-align: middle;
	color: #427CFF;
}

.feather {
	font-family: feather !important;
	speak: none;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.vs-icon {
	color: inherit;
	text-align: center;
	font-size: 1rem;
}

.worktable-font-color {
	color: rgb(45, 55, 72);
}




.colimg {
	width: 60px;
	height: 60px;
	float: left;

}


.Quick-itme{
		padding:11px;
	}
.quickCenterIcon {

	width: 32px;
  height: 32px;
  background-size: 100% 100%;


}
.quickCenterIcon svg,.quickCenterIcon svg image{
	width: 20px;
	height: 20px;
}

.colimglable {

	//float: left;
	display: block;
	//width: 59px;
  //height: 14px;
  overflow-wrap: break-word;
  color: rgb(45, 55, 72);
  font-size: 14px;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
	margin:3px 0 12px;
  //line-height: 30px;
  //  margin-top: 20px;
}
.Quick-Center-TopTitle{

  height: 18px;
    overflow-wrap: break-word;
    color: rgb(45, 55, 72);
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    margin: 0px 0 0 12px;
	margin-left: 4px;
    font-weight: 500;
  //line-height: 25px;
  //margin-top: 3px;
  //margin-left: 5px;
}
.Quick-Center-TopMore{
	color: rgb(45, 55, 72);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  margin-top: -3px;
}
.topblock{
	width: 77px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgb(45, 55, 72);
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 25px;
  margin-top: 3px;
  margin-left: 5px;
}

.topblockimg {
    display: block;
    float: left;
    height: 18px;
	width: 18px;
	margin-left: 5px;

}



	.symain .el-card__body {
		padding-bottom: 0px !important;
	}

	.syselect{
		line-height: 26px;
		height: 26px;
	}
	.syselect div,.syselect input{
		line-height: 26px;
		height: 26px;
	}

	.no-Clear  .el-input__wrapper:hover .el-input__suffix{
		display: none !important;

	}

	.quicksx{ display: "inline-block"; width:"10px";  height: "10px";  background-color: "blue";  border-radius: "50%";  }
	.quickkx{ display: "inline-block";  width: "10px"; height: "10px";  background-color: "blue";  border-radius: "50%";  }



.quickCenterCol2 {

  border-radius: 7px;
  height: 56px;
  //margin-left: 33px;
  width: 56px;
}

.quickCenterCol3 {

  border-radius: 7px;
  height: 56px;
  //margin-left: 33px;
  width: 56px;
}

.quickCenterCol4 {

  border-radius: 7px;
  height: 56px;
  //margin-left: 33px;
  width: 56px;
}

.quickCenterCol5 {

  border-radius: 7px;
  height: 56px;
  width: 56px;
  //margin-left: 12px;
}

.quickCenterCol6 {

  border-radius: 7px;
  height: 56px;
  //margin-left: 33px;
  width: 56px;
}

.quickCenterCol7 {

  border-radius: 7px;
  height: 56px;
  //margin-left: 33px;
  width: 56px;
}

.quickCenterCol8 {

  border-radius: 7px;
  height: 56px;
  //margin-left: 33px;
  width: 56px;
}
.leftquickCenter{
	width: 21px;
  height: 21px;
    /*
  background: url(../../../../../public/img/homeleftquickCenter.png)
    100% no-repeat;
  background-size: 100% 100%;
  */
left:20%;
  top: 48%;
  cursor: pointer;
  position: relative;
  text-align: right;
}
.rightquickCenter{
	width: 21px;
  height: 21px;
  /*
  background: url(../../../../../public/img/homerightquickCenter.png)
    100% no-repeat;
  background-size: 100% 100%;
  */
  margin-left: 0px;
  top: 48%;
  cursor: pointer;
  position: relative;
  right: 20%;
  text-align: right;

}

.noticenav{
	padding-left: 30px;
	list-style-type: none;
	border: none;
	padding-top:50px;
	//overflow: auto;
	//height:300px;
}
.imgleftli{
	background-color: rgba(64, 158, 255, 1);
  border-radius: 7px;
  width: 11px;
  height: 11px;
  display: none;
  //margin-top: 8px;
  //float: left;
}
.noticetitle{
	width: 60%;
  //height: 15px;
  overflow-wrap: break-word;
  color: rgb(45, 55, 72);
  font-size: 16px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  //line-height: 30px;
  margin-left: 8px;
  //float: left;
  font-family:  PingFangSC-Medium;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;overflow: clip;
}

.noticedate{
	width: 33%;
  height: 13px;
  overflow-wrap: break-word;
  color: rgb(45, 55, 72);
  font-size: 16px;
  font-weight: NaN;
  text-align: right;
  white-space: nowrap;
 	// line-height: 30px;
  margin: 1px 0 0 0px;
  font-family:  PingFangSC-Medium;
  float: left;
  //float: left;
}

.noticetitleTopMoreImg{
	width: 4px;
  height: 14px;
  background: url(../../../../../public/img/homeNoticeTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-left: 5px;
  float: left;
}
.noticetitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: #427CFF;
  font-size: 13px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: 3px 0 0 8px;
}
@media (min-width: 1600px)and (max-width: 1680px) {
	.Quick-itmeRow{
		/*margin:0 9px;*/
		margin: auto;
	}

	.Quick-Center-Top{
		margin-left:7px;
	}
	.quickCenterIcon{
		width:50px;
		height:50px;
	}
	.quickCenterIcon svg,.quickCenterIcon svg image{
	width: 50px;
	height: 50px;
}
}
@media (min-width: 1500px) and (max-width: 1600px){
	.Quick-itmeRow{
		margin:0 10px;
	}
	.Quick-itmeBox .Quick-itme{
		width:44px;
		height:44px;
	}
	.Quick-itme{
		padding:2px;
	}
	//54
	.quickCenterIcon{
		width:50px;
		height:50px;
	}
	.quickCenterIcon svg,.quickCenterIcon svg image{
	width: 50px;
	height: 50px;
}

	.Quick-Center-Topimg{
		width:20px;
		height: 20px;
	}
	.Quick-Center .el-main{
	}
	.noticetitle{
		font-size:13px;
		width:60%;
		white-space: nowrap; /* 确保文本在一行内显示 */
		overflow: hidden; /* 隐藏超出容器的内容 */
		text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
	}
	.noticedate{
		font-size:13px;
	}
	.noticenav{
		padding-left:10px;
		padding-right: 10px;
	}
	//.Quick-noticeBox{
	//	right:10px;
	//}
	.colimglable{
		font-size:13px;
	}
}

@media (min-width: 1690px) and (max-width: 1999px){
	.Quick-itmeRow{
		margin:0 10px;
	}
	.Quick-itmeBox .Quick-itme{
		width:44px;
		height:44px;
	}
	.Quick-itme{
		padding:3px;
	}
	//54
	.quickCenterIcon{
		width:50px;
		height:50px;
	}
	.quickCenterIcon svg,.quickCenterIcon svg image{
	width: 50px;
	height: 50px;
}
.quickCenterCol{
    border-radius: 7px;
    height: 56px;
    width: 56px;
}

	.Quick-Center-Topimg{
		width:20px;
		height: 20px;
	}
	.Quick-Center .el-main{
	}
	.noticetitle{
		font-size:13px;
		width:60%;
		white-space: nowrap; /* 确保文本在一行内显示 */
		overflow: hidden; /* 隐藏超出容器的内容 */
		text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
	}
	.noticedate{
		font-size:13px;
	}
	.noticenav{
		padding-left:10px;
		padding-right: 10px;
	}
	//.Quick-noticeBox{
	//	right:10px;
	//}
	.colimglable{
		font-size:13px;
	}
}

@media (min-width: 1200px) and (max-width: 1500px){
	.Quick-itmeRow{
		margin:0 14px;
	}
	.Quick-itmeBox .Quick-itme{
		width:44px;
		height:44px;
	}
	.Quick-itme{
		padding:9px;
	}
	.quickCenterIcon{
		width:36px;
		height:36px;
	}
	.quickCenterIcon svg,.quickCenterIcon svg image{
		width:36px;
		height:36px;
}

	.Quick-Center-Topimg{
		width:20px;
		height: 20px;
	}
	.Quick-Center .el-main{
	}
	.noticetitle{
		font-size:13px;
		width:60%;
		white-space: nowrap; /* 确保文本在一行内显示 */
		overflow: hidden; /* 隐藏超出容器的内容 */
		text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
	}
	.noticedate{
		font-size:13px;
	}
	.noticenav{
		padding-left:10px;
		padding-right: 10px;
	}
	//.Quick-noticeBox{
	//	right:10px;
	//}
	.colimglable{
		font-size:13px;
	}
}

@media (min-width: 2000) and (max-width: 3000){
	.Quick-itmeRow{
		margin:0 10px;
	}
	.Quick-itmeBox .Quick-itme{
		width:44px;
		height:44px;
	}
	.Quick-itme{
		padding:2px;
	}
	.quickCenterIcon{
		width:50px;
		height:50px;
	}
	.quickCenterIcon svg,.quickCenterIcon svg image{
	width: 50px;
	height: 50px;
}

	.Quick-Center-Topimg{
		width:20px;
		height: 20px;
	}
	.Quick-Center .el-main{
	}
	.noticetitle{
		font-size:12px;
		width:60%;
		white-space: nowrap; /* 确保文本在一行内显示 */
		overflow: hidden; /* 隐藏超出容器的内容 */
		text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
	}
	.noticedate{
		font-size:12px;
	}
	.noticenav{
		padding-left:10px;
		padding-right: 10px;
	}
	//.Quick-noticeBox{
	//	right:10px;
	//}
	.colimglable{
		font-size:13px;
	}
}

.Quick-itme{
	border: 1px #fff solid;
	margin: auto;

}
.Quick-itme:hover{
	border: 1px solid rgba(105, 178, 251, 1);
}
</style>
